/**
 * @description 收藏夹/商品
 */
import style from './styles/Favorite.less';
import classnames from "classnames";
import React from 'react';
import EntryBase from "../Common/EntryBase";
const Fragment = React.Fragment;
import { Button, Toast, SwipeAction } from 'wd-mobile';
import GoodsItem from 'components/GoodsItem';
import CategoryGoodsItem from 'components/CategoryGoodsItem';

import ScrollReachEndContainer from "components/ScrollReachEndContainer";

import { collectList, bookGoods, unBookGoods, unCollect } from "api_liuhaojie/app/goods";

// img
import img_nolist from "./images/nolist.png";
import icon_close from "images/icon/close.png";

import util from "commons/util";
let query = util.parseQueryString();

const goodsList = [
    {
        id: "1",
        name: "腾讯视频-月卡",
        price: "￥45.00",
        originPrice: "￥60.00",
        stock: 300,
        soldNum: 3000,
        newer: true
    },
    {
        id: "2",
        name: "我是假标题我是假标题我是假…",
        price: "￥45.00",
        originPrice: "￥60.00",
        stock: 50,
        soldNum: 234
    },
    {
        id: "3",
        name: "我是假标题我是假标题我是假…",
        price: "￥45.00",
        originPrice: "￥60.00",
        stock: 0,
        soldNum: 234
    },
    {
        id: "4",
        name: "我是假标题我是假标题我是假…",
        price: "￥45.00",
        originPrice: "￥60.00",
        stock: 0,
        soldNum: 234
    },
    {
        id: "4",
        name: "我是假标题我是假标题我是假是假标题我是假",
        price: "￥45.00",
        originPrice: "￥60.00",
        stock: 0,
        soldNum: 234
    },
    {
        id: "4",
        name: "我是假标题我是假标题我是假…",
        price: "￥45.00",
        originPrice: "￥60.00",
        stock: 0,
        soldNum: 234
    }
]

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            showScrollLoadText: false,
            page: 1,
            hasload: false
        }

        // 是否正在加载数据
        this.loading = false;
    }
    componentDidMount() {
        this.collectList();
    }
    render() {
        return (
            <Fragment>
                <ScrollReachEndContainer className={classnames(style.main, "x-scroll-y")} showScrollLoadText={this.state.showScrollLoadText} loadText={this.state.scrollLoadText} onReachEnd={() => {
                    this.reachEnd();
                }}>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <div key={index} className={style.favoriteItem}>
                                    <SwipeAction
                                        right={[
                                            {
                                                text: "删除",
                                                onPress: () => {
                                                    unCollect({skuId:item.id}).then(()=>{
                                                        this.setState({
                                                            page:1,
                                                            list:[]
                                                        },()=>{
                                                            this.collectList();
                                                        })
                                                    })
                                                },
                                                style: { backgroundColor: "#FF5E3B",width:'130px',color:'#FFFFFF',fontSize:'28px' }
                                            }
                                        ]}
                                        >
                                        <CategoryGoodsItem data={item} bookGoods={() => {
                                            bookGoods({
                                                skuId: item.id
                                            }).then(res => {
                                                const newList = [...this.state.list];
                                                newList[index].isBook = true;
                                                this.setState({
                                                    list: newList
                                                })
                                            })
                                        }} unBookGoods={() => {
                                            unBookGoods({
                                                skuId: item.id
                                            }).then(res => {
                                                const newList = [...this.state.list];
                                                newList[index].isBook = false;
                                                this.setState({
                                                    list: newList
                                                })
                                            })
                                        }} />
                                    </SwipeAction>
                                </div>
                            )
                        })
                    }
                    {
                        this.state.list.length <= 0 && !!this.state.hasload && <div className={style.nolist}>
                            <img src={img_nolist} alt="" />
                            <div>列表暂无信息</div>
                        </div>
                    }
                </ScrollReachEndContainer>
            </Fragment>
        )
    }

    // 收藏商品
    collectList() {
        collectList({
            page: this.state.page
        }).then(res => {
            const newList = [...this.state.list, ...res.data];
            this.setState({
                showScrollLoadText: newList.length > 0,
                hasload: true,
                page: res.data.length < 1 ? this.state.page : this.state.page + 1,
                list: newList,
                scrollLoadText: res.data.length < 10 ? "没有更多商品" : "正在加载更多商品..."
            })
            this.loading = false;
        })
    }

    // 取消收藏
    unCollect(id, index) {
        unCollect({
            skuId: id
        }).then(res => {
            const newList = [...this.state.list];
            newList.splice(index, 1);
            this.setState({
                list: newList
            })
        })
    }

    // 触底
    reachEnd() {
        if (!this.loading) {
            this.loading = true;
            this.collectList();
        }
    }
}

export default App;